<script setup>
import {inject,computed} from 'vue'
import router from '@/router'
import {ElBadge} from 'element-plus'

//登录相关逻辑
const userinfo=inject("userinfo")
// const router=useRouter()
if(!userinfo.value){
    //若没有登录，无法访问管理入口
    router.push('/')
}
const badge=inject('badge')

//点击图标跳转
function handleClickItem(target){
    router.push({name:target})
}
</script>

<template>
<div>
    <RouterView v-slot="{ Component }">
        <template v-if=" Component ">
            <Transition mode="out-in">
                <component :is="Component"></component>
            </Transition>
        </template>
    </RouterView>
    <div v-show="$route.name=='管理入口'">
        <transition name="el-zoom-in-bottom">
            <div class="panel" v-if="userinfo">
                <div class="title">用户</div>
                <div class="main">
                    <div class="item" @click="handleClickItem('通知')">
                        <el-badge :value="badge.notification_count==0?'':badge.notification_count">
                            <el-image src="/img/icons/邮箱.png" class="icon"/>
                        </el-badge>
                        <div class="name">通知</div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="el-zoom-in-bottom">
            <div class="panel" v-if="userinfo?.auditor">
                <div class="title">审核专员</div>
                <div class="main">
                    <div class="item" @click="handleClickItem('专家审核')">
                        <el-badge :value="badge.talent_audit_count==0?'':badge.talent_audit_count">
                            <el-image src="/img/icons/专家.png" class="icon"/>
                        </el-badge>
                        <div class="name">专家审核</div>
                    </div>
                    <div class="item">
                        <el-badge :value="0">
                            <el-image src="/img/icons/机构.png" class="icon"/>
                        </el-badge>
                        <div class="name">机构审核</div>
                    </div>
                    <div class="item">
                        <el-badge :value="0">
                            <el-image src="/img/icons/产品.png" class="icon"/>
                        </el-badge>
                        <div class="name">产品管理</div>
                    </div>
                    <div class="item">
                        <el-badge :value="0">
                            <el-image src="/img/icons/服务.png" class="icon"/>
                        </el-badge>
                        <div class="name">服务管理</div>
                    </div>
                    <div class="item">
                        <el-badge :value="0">
                            <el-image src="/img/icons/需求.png" class="icon"/>
                        </el-badge>
                        <div class="name">需求管理</div>
                    </div>
                    <div class="item">
                        <el-badge :value="0">
                            <el-image src="/img/icons/资讯.png" class="icon"/>
                        </el-badge>
                        <div class="name">资讯管理</div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="el-zoom-in-bottom">
            <div class="panel" v-if="userinfo?.auditor">
                <div class="title">系统管理员</div>
                <div class="main">
                    <div class="item">
                        <el-badge value="">
                            <el-image src="/img/icons/权限.png" class="icon"/>
                        </el-badge>
                        <div class="name">权限管理</div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</div>

</template>

<style scoped>
.panel{
    margin:30px 2%;
    width:96%;
    height:auto;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.title{
    font-weight:bolder;
    margin-left:10px;
    margin-bottom:10px;
    padding-top:5px;
}
.main{
    display:flex;
    flex-wrap:wrap;
    background-color:white;
}
.item{
    display:flex;
    flex-flow:column;
    align-items:center;
    margin:10px 10px;
    cursor:pointer;
}
.icon{
    background-color:var(--el-color-primary-light-9);
    width:50px;
    height:50px;
    border-radius:5px;
    padding:5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 3px 6px -1px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
}
.icon:hover{
    background-color:var(--el-color-warning-light-9);
}
.icon:active{
    background-color:var(--el-color-error-light-9);
}
</style>